<template>
  <div id="thirdbottonleftE" class="homeEchartsClass"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  data() {
    return {};
  },
//   mounted() {
//  this.$nextTick(() => {
//     this.myChart = echarts.init(document.getElementById("thirdbottonleftE"));

//   })
//   window.addEventListener("resize", () => {
//   	// 判断是否存在，直接调用resize方法
//     if (this.myChart) this.myChart.resize()
//   })

//     let chartDom = document.getElementById("thirdbottonleftE");
//     let myChart = echarts.init(chartDom);
//     let option;

//     option = {
//       //   color: ["#E66E37", "#EEDC6E", "#386DCB", "#1FACD4", "#3BC9B6"],
//       tooltip: {
//         trigger: "axis",
//         axisPointer: {
//           // Use axis to trigger tooltip
//           type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
//         },
//         formatter: (params) => {
//           // 获取xAxis data中的数据
//           let dataStr = `<div><p style="font-weight:bold;margin:0 8px 15px;">${params[0].name}</p></div>`;
//           params.forEach((item) => {
//             dataStr += `<div>
//           <div style="margin: 0 8px;">
         
//             <span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:${item.color};"></span>
           
//             <span>${item.seriesName}</span>
           
//             <span style="float:right;margin-left:20px;font-weight:600">${item.data}</span>
//           </div>
//         </div>`;
//           });
//           return dataStr;
//         },
//       },
//       legend: {
//         itemHeight: 10,
//         itemWidth: 10,
//         itemGap: 20,
//         orient: "horizontal",
//         bottom: 15,
//         icon: "rect",
//       },
//       grid: {
//         left: "3%",
//         right: "4%",
//         bottom: "13%",
//         containLabel: true,
//       },
//       xAxis: {
//         type: "category",
//         axisTick: {
//           show: false,
//         },
//         data: [
//           "1月",
//           "2月",
//           "3月",
//           "4月",
//           "5月",
//           "6月",
//           "7月",
//           "8月",
//           "9月",
//           "10月",
//           "11月",
//           "12月",
//         ],
//       },
//       yAxis: {
//         type: "value",
//       },
//       series: [
//         {
//           name: "交易",
//           type: "bar",
//           stack: "total",
//           label: {
//             show: false,
//           },
//           emphasis: {
//             focus: "series",
//           },
//           itemStyle: {
//             color: "#A563FA",
//           },

//           data: [2, 6, 3, 2, 5, 3, 7, 3, 8, 1, 4, 5],
//         },
//         {
//           name: "系统",
//           type: "bar",
//           stack: "total",
//           label: {
//             show: false,
//           },
//           emphasis: {
//             focus: "series",
//           },
//           itemStyle: {
//             color: "#4D8CFD",
//           },
//           data: [12, 13, 11, 14, 9, 23, 1, 9, 3, 3, 2, 7],
//         },
//         {
//           name: "网络",
//           type: "bar",
//           stack: "total",
//           label: {
//             show: false,
//           },
//           emphasis: {
//             focus: "series",
//           },
//           itemStyle: {
//             color: "#4F42E8",
//           },
//           data: [22, 18, 19, 23, 29, 5, 8, 9, 1, 3, 5, 2],
//         },
//         {
//           name: "安全",
//           type: "bar",
//           stack: "total",
//           label: {
//             show: false,
//           },
//           emphasis: {
//             focus: "series",
//           },
//           itemStyle: {
//             color: "#6FE587",
//           },
//           data: [22, 18, 19, 1, 3, 6, 8, 2, 1, 11, 24, 9],
//         },
//         {
//           name: "其他",
//           type: "bar",
//           stack: "total",
//           label: {
//             show: false,
//           },
//           emphasis: {
//             focus: "series",
//           },
//           itemStyle: {
//             color: "#564897",
//           },
//           data: [1, 3, 5, 2, 5, 4, 22, 12, 11, 7, 9, 2],
//         },
//       ],
//     };

//     option && myChart.setOption(option);
//   },
//   watch: {
//    "$store.state.app.sidebar.opened"() {
//        setTimeout(() => {
//            this.myChart.resize()
//        }, 300)
//    }
// }
};
</script>

<style lang='scss' scoped>
.homeEchartsClass {
  height: 100%;
  width: 100%;
}
</style>

